<!--

  1.公共列表组件
  2.参数必须是数组 array 类型
  3.参数

  {
    icon: "图标",               // 没有icon也可以省略该字段
    listName: "列表名字",
    listDetail: "展示的详情",    // 没有内容可以省略该字段
    showReturn: 是否显示更多按钮,
    path: "跳转的",
    returnColor:'返回图标的颜色'
  }

-->

<template>
  <ul class="lists">
    <li v-for="(item,index) in ListItem" :key="index" @click="$emit('click',item)">
      <router-link :to="item.path">
        <div v-if="item.icon" class="listIcon">
          <img :src="item.icon" alt>
        </div>
        <div v-if="item.listName" class="itemText">{{item.listName}}</div>
        <div
          v-if="item.listDetail"
          :style="`color:${txtCol}`"
          class="item_details"
        >{{item.listDetail}}</div>
        <div class="mores" v-if="item.showReturn">
          <i>
            <svg
              t="1553346769702"
              class="icon"
              style
              viewBox="0 0 1024 1024"
              version="1.1"
              xmlns="http://www.w3.org/2000/svg"
              p-id="2548"
              xmlns:xlink="http://www.w3.org/1999/xlink"
              width="200"
              height="200"
            >
              <path
                d="M704 512c0-8.288-3.232-15.776-8.4-21.456l0.08-0.064-320-352-0.08 0.08A31.76 31.76 0 0 0 352 128a32 32 0 0 0-32 32c0 8.288 3.232 15.76 8.4 21.456l-0.08 0.08L628.752 512 328.32 842.464l0.08 0.08A31.776 31.776 0 0 0 320 864a32 32 0 0 0 32 32 31.84 31.84 0 0 0 23.6-10.544l0.08 0.08 320-352-0.08-0.08c5.168-5.68 8.4-13.168 8.4-21.456z"
                p-id="2549"
                :fill="item.returnColor ? item.returnColor : '#e5e5e5'"
              ></path>
            </svg>
          </i>
        </div>
      </router-link>
    </li>
  </ul>
</template>

<script>
export default {
  name: "lists",
  props: {
    ListItem: {
      type: Array,
      required: true
    },
    txtCol: {
      type: String,
      default: "#7ba6d1"
    }
  }
};
</script>

<style scoped lang="stylus">
@import '../common/styl/mixin'
.lists
  width 100%
  li
    height rem(45)
    background-color #fff
    box-sizing border-box
    padding 0 rem(20)
    border-bottom rem(1) solid $borderCol
    a
      width 100%
      height 100%
      display block
      color #333
      display flex
      justify-content flex-start
      align-items center
      .listIcon
        margin-right rem(10)
        width rem(18)
        height rem(18)
        img
          width 100%
          height 100%
          object-fit contain
      .itemText
        margin-right auto
        font-size rem(14)
      .item_details
        font-size rem(15)
        color $btnColor
      .mores
        width rem(18)
        height rem(18)
        margin-right rem(-6)
        i
          display inline-block
          width 100%
          height 100%
          svg
            width 100%
            height 100%
</style>
